import React, { useEffect, useRef } from 'react';
import { Form, Input, InputNumber, Modal } from 'antd';
 

const AddPersonModal = ({ isOpen, handleOk, onClose }) => {
  const [form] = Form.useForm();

  const useResetFormOnCloseModal = ({ form, isOpen }) => {
    const prevOpenRef = useRef();
    useEffect(() => {
      prevOpenRef.current = isOpen;
    }, [isOpen]);
    const prevOpen = prevOpenRef.current;
  
    useEffect(() => {
      if (!isOpen && prevOpen) {
        form.resetFields();
      }
    }, [form, prevOpen, isOpen]);
  };

  useResetFormOnCloseModal({
    form,
    isOpen,
  });
 
  return (
    <Modal title="Basic Modal" open={isOpen} onOk={handleOk(form)} onCancel={onClose}>
        <Form form={form} layout="vertical" name="userForm">
          <Form.Item name="name" label="用户名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="age" label="用户年龄" rules={[{ required: true }]}>
            <InputNumber />
          </Form.Item>
        </Form>
      </Modal>
  );
};
 
export default AddPersonModal;